@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	width: 100%;
	color: #959595;
	font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

html,.main {
	padding: 0;
	margin: 0;
}

.main {
	background: #fff url(../images/header_bg.gif) repeat-x center 85px;
}

.clr {
	clear: both;
	padding: 0;
	margin: 0;
	width: 100%;
	font-size: 0;
	line-height: 0;
}

.logo {
	padding: 0;
	float: left;
	width: auto;
}

h1 {
	margin: 0;
	padding: 29px 24px;
	float: left;
	color: #e4e5e5;
	font: bold 36px/1.2em Arial, Helvetica, sans-serif;
	letter-spacing: -3px;
	text-transform: uppercase;
}

h1 a,h1 a:hover {
	color: #e4e5e5;
	text-decoration: none;
}

h1 span {
	color: #00c6ff;
}

h1 small {
	font: normal 12px/1.2em Arial, Helvetica, sans-serif;
	letter-spacing: normal;
	padding-left: 32px;
}

h2 {
	font: normal 24px/1.5em Arial, Helvetica, sans-serif;
	padding: 8px 0;
	margin: 8px 0;
	color: #595959;
}

p {
	margin: 8px 0;
	padding: 0 0 8px 0;
	font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

a {
	color: #00c6ff;
	text-decoration: underline;
}

p.spec {
	
}

p.infopost {
	line-height: 30px;
}

a.rm {
	
}

a.com {
	
}

.header,.content,.menu_nav,.fbg,.footer,form,ol,ol li,ul,.content .mainbar,.content .sidebar
	{
	margin: 0;
	padding: 0;
}

.header {
	
}

.header_resize {
	margin: 0 auto;
	padding: 0;
	width: 970px;
}

img.hbg_img {
	margin-bottom: 16px;
	padding: 10px;
	background-color: #edefef;
}

img.readmore {
	display: block;
	margin-top: -40px;
	position: relative;
	top: -80px;
	left: 680px;
	border: none;
}

.menu_nav {
	margin: 0;
	padding: 0 16px 16px 0;
	height: 67px;
}

.menu_nav ul {
	list-style: none;
	height: 67px;
	border-left: 1px solid #fff;
}

.menu_nav ul li {
	margin: 00;
	padding: 0;
	float: left;
	border-right: 1px solid #fff;
}

.menu_nav ul li a {
	display: block;
	margin: 0;
	padding: 14px 0 31px;
	width: 107px;
	color: #888;
	text-decoration: none;
	font-size: 13px;
	text-align: center;
}

.menu_nav ul li.active a,.menu_nav ul li a:hover {
	color: #fff;
	background: #f00 url(../images/menu_a.gif) no-repeat center top;
}

.content {
	
}

.content_resize {
	margin: 0 auto;
	padding: 0 0 24px;
	width: 970px;
	background-color: #fff;
}

.content .mainbar {
	margin: 0;
	padding: 0;
	float: left;
	width: 670px;
}

.content .mainbar img {
	border: 1px solid #d8dbdc;
	padding: 4px;
}

.content .mainbar img.fl {
	margin: 4px 16px 4px 0;
	float: left;
}

.content .mainbar .article {
	margin: 0 0 12px;
	padding: 8px 24px 0 24px;
}

.content .sidebar {
	padding: 0;
	float: right;
	width: 288px;
}

.content .sidebar .gadget {
	margin: 0 0 12px;
	padding: 8px 16px 8px 24px;
}

ul.sb_menu,ul.ex_menu {
	margin: 0;
	padding: 0 0 0 16px;
	list-style: none;
	color: #959595;
}

ul.sb_menu li,ul.ex_menu li {
	margin: 0;
}

ul.sb_menu li {
	padding: 4px 0;
	width: 220px;
}

ul.ex_menu li {
	padding: 4px 0;
}

ul.sb_menu li a,ul.ex_menu li a {
	color: #959595;
	text-decoration: none;
	margin-left: -16px;
	padding: 4px 8px 4px 16px;
	background: url(../images/li.gif) no-repeat left center;
}

ul.sb_menu li a:hover,ul.ex_menu li a:hover {
	color: #00c6ff;
	font-weight: bold;
	text-decoration: none;
}

.content p.pages {
	padding: 32px 24px 12px;
	font-size: 11px;
	color: #959595;
	text-align: right;
}

.content p.pages span,.content p.pages a:hover {
	padding: 5px 10px;
	color: #fff;
	background-color: #00c6ff;
	border: 1px solid #00c6ff;
}

.content p.pages a {
	padding: 5px 10px;
	color: #959595;
	background-color: #fff;
	border: 1px solid #edebeb;
	text-decoration: none;
}

.content p.pages small {
	font-size: 11px;
	float: left;
}

.content .mainbar .comment {
	margin: 0;
	padding: 16px 0 0 0;
}

.content .mainbar .comment img.userpic {
	border: 1px solid #dedede;
	margin: 10px 16px 0 0;
	padding: 0;
	float: left;
}

.fbg {
	background-color: #7fe1ff;
}

.fbg_resize {
	margin: 0 auto;
	width: 922px;
	padding: 24px;
	color: #fff;
}

.fbg .c2 a,.fbg .c3 a {
	margin: 0;
	padding: 2px 4px;
	color: #fff;
	text-decoration: underline;
}

.fbg h2 {
	color: #fff;
}

.fbg img {
	margin: 0 16px 16px 0;
	padding: 3px;
	background-color: #fff;
	border: 1px solid #99bece;
}

.fbg .col {
	margin: 0;
	float: left;
}

.fbg .c1 {
	padding: 0 16px 0 0;
	width: 266px;
}

.fbg .c2 {
	padding: 0 16px;
	width: 300px;
}

.fbg .c3 {
	padding: 0 0 0 16px;
	width: 260px;
}

.footer {
	
}

.footer_resize {
	margin: 0 auto;
	padding: 20px 24px;
	width: 922px;
}

.footer p {
	margin: 0;
	padding: 4px 0;
	line-height: normal;
}

.footer a {
	color: #959595;
	padding: inherit;
	text-decoration: underline;
}

.footer a:hover {
	text-decoration: none;
}

.footer .lf {
	float: left;
}

.footer .rf {
	float: right;
}

ol {
	list-style: none;
}

ol li {
	display: block;
	clear: both;
}

ol li label {
	display: block;
	margin: 0;
	padding: 16px 0 0 0;
}

ol li input.text {
	width: 480px;
	border: 1px solid #c0c0c0;
	margin: 2px 0;
	padding: 5px 2px;
	height: 16px;
	background-color: #fff;
}

ol li textarea {
	width: 480px;
	border: 1px solid #c0c0c0;
	margin: 2px 0;
	padding: 2px;
	background-color: #fff;
}

ol li .send {
	margin: 16px 0 0 0;
}

.searchform {
	float: right;
}

#formsearch {
	margin: 0;
	height: 36px;
	padding: 12px 28px 16px 0;
}

#formsearch span {
	display: block;
	margin: 6px 0;
	padding: 0;
	float: left;
	background: #fff url(../images/search.gif) no-repeat top left;
}

#formsearch input.editbox_search {
	margin: 0;
	padding: 11px 6px 10px;
	float: left;
	width: 181px;
	border: none;
	background: none;
	font: normal 12px/1.5em Arial, Helvetica, sans-serif;
	color: #a8acb2;
}

#formsearch input.button_search {
	margin: 6px 0 0 0;
	padding: 0;
	border: none;
	float: left;
}

table {
	*border-collapse: collapse; /* IE7 и раньше */
	border-spacing: 0;
	width: 100%;
}

.bordered {
	border: solid #ccc 1px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 1px 1px #ccc;
	-moz-box-shadow: 0 1px 1px #ccc;
	box-shadow: 0 1px 1px #ccc;
}

.bordered tr:hover {
	background: #e7f0f3;
	-o-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

.bordered td,.bordered th {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	padding: 10px;
	text-align: left;
}

.bordered th {
	background-color: #dce9f9;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc),
		to(#dce9f9));
	background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
	background-image: linear-gradient(top, #ebf3fc, #dce9f9);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	border-top: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.bordered td:first-child,.bordered th:first-child {
	border-left: none;
}

.bordered th:first-child {
	-moz-border-radius: 6px 0 0 0;
	-webkit-border-radius: 6px 0 0 0;
	border-radius: 6px 0 0 0;
}

.bordered th:last-child {
	-moz-border-radius: 0 6px 0 0;
	-webkit-border-radius: 0 6px 0 0;
	border-radius: 0 6px 0 0;
}

.bordered th:only-child {
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
	-moz-border-radius: 0 0 0 6px;
	-webkit-border-radius: 0 0 0 6px;
	border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
	-moz-border-radius: 0 0 6px 0;
	-webkit-border-radius: 0 0 6px 0;
	border-radius: 0 0 6px 0;
}

.button, .button span {
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.button {
    white-space: nowrap;
    line-height:1em;
    position:relative;
    outline: none;
    overflow: visible; /* removes extra side padding in IE */
    cursor: pointer;
    border: 1px solid #999;/* IE */
    border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
    border-bottom:rgba(0, 0, 0, .4) 1px solid;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .1) 0%,
        rgba(0, 0, 0, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(0, 0, 0, .1)),
        to(rgba(255, 255, 255, .1))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
    -moz-user-select: none;
    -webkit-user-select:none;
    -khtml-user-select: none;
    user-select: none;
    margin-bottom:10px;
}
.button.full, .button.full span {
    display: block;
}
.button:hover, .button.hover {
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(255, 255, 255, .1)),
        to(rgba(255, 255, 255, .2))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}
.button:active, .button.active {
    top:1px;
}
.button span {
    position: relative;
    color:#fff;
    text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
    border-top: rgba(255, 255, 255, .2) 1px solid;
    padding:0.6em 1.3em;
    line-height:1em;
    text-decoration:none;
    text-align:center;
    white-space: nowrap;
}

Теперь, создадим классы для разных размеров кнопок.

.button.small span {
    font-size:12px;
}
.button.medium span {
    font-size:14px;
}
.button.large span {
    font-size:18px;
}

Теперь нам нужны классы для разных цветов кнопок.

.button.black {
    background-color: #333333;
}
.button.gray {
    background-color: #666666;
}
.button.white {
    background-color: #FFFFFF;
}
.button.white span{
    color: #666666;
}
.button.red {
    background-color: #e62727;
}
.button.orange {
    background-color: #ff5c00;
}
.button.magenta {
    background-color: #A9014B;
}
.button.yellow {
    background-color: #ffb515;
}
.button.blue {
    background-color: #00ADEE;
}
.button.pink {
    background-color: #e22092;
}
.button.green {
    background-color: #91bd09;
}
.button.rosy {
    background-color: #F16C7C;
}
.button.brown {
    background-color: #804000;
}
.button.purple {
    background-color: #800080;
}
.button.cyan {
    background-color: #46C7C7;
}
.button.gold {
    background-color: #D4A017;
}

